<div class="dropdown">
  <clr-dropdown [clrCloseMenuOnItemClick]="false">
    <button *ngIf="type == 'button'" class="btn btn-outline-primary source" clrDropdownTrigger>
      {{title}}
      <clr-icon shape="caret down"></clr-icon>
    </button>
    <div *ngIf="type == 'link'" class="source">
      <a [routerLink]="[url]" class="dropdown-link">
        {{ title }}
      </a>
      <clr-icon shape="caret down" class="dropdown-link-icon" clrDropdownTrigger></clr-icon>
    </div>
    <div *ngIf="type == 'icon'" class="source" clrDropdownTrigger>
      <clr-icon [attr.shape]="title"></clr-icon>
      <clr-icon shape="caret down"></clr-icon>
    </div>
    <div *ngIf="type == 'label'" class="source" clrDropdownTrigger>
      {{title}}
      <clr-icon shape="caret down"></clr-icon>
    </div>
    <ng-template [(clrIfOpen)]="isOpen">
      <clr-dropdown-menu class="dropdown-wrapper"  [ngStyle]="dropdownMenuStyle" [clrPosition]="position">
      <div class="dropdown-list">
        <ng-container *ngFor="let item of items | slice : 0 : itemLimit; let i = index; trackBy: identifyItem" >
        <label *ngIf="item.type == 'header'" class="dropdown-header" aria-hidden="true">{{item.label}}</label>
        <div *ngIf="item.type == 'text'" (click)="openLink(i)" [ngClass]="{ 'active': item.name == selectedItem }" aria-label="item.label" clrDropdownItem>{{item.label}}</div>
        <a class="dropdown-link" *ngIf="item.type == 'link'" (click)="openLink(i)" [ngClass]="{ 'active': item.name == selectedItem }" aria-label="item.label" clrDropdownItem>{{item.label}}</a>
        <div *ngIf="item.type == 'separator'" class="dropdown-divider" role="separator" aria-hidden="true"></div>
      </ng-container>
      </div>
      <button class="dropdown-button" *ngIf= "items.length > defaultItemLimit" (click)="toggleShowMore()" clrDropdownItem> {{ itemLimit != items.length ? 'SHOW MORE' : 'SHOW LESS' }}</button>
    </clr-dropdown-menu>
    </ng-template>
  </clr-dropdown>
</div>
